<!--
 * @Author: your name
 * @Date: 2021-09-05 19:10:59
 * @LastEditTime: 2021-10-13 11:39:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \traning\src\views\Show.vue
-->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未读消息" name="first">
        <el-card>
          <el-table :data="noRead" :show-header="false" style="width: 100%">
            <el-table-column prop="title" min-width="60%"></el-table-column>
            <el-table-column prop="date" label="" min-width="20%">
            </el-table-column>
            <el-table-column prop="" min-width="20%">
              <template slot-scope="scope">
                <el-button @click="turnRead(scope.row)" size="small"
                  >标为已读</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="toLeft">
            <el-button @click="allRead" size="small">全部已读</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="second">
        <el-card>
          <el-table :data="Read" :show-header="false" style="width: 100%">
            <el-table-column prop="title" min-width="60%"> </el-table-column>
            <el-table-column prop="date" label="" min-width="20%">
            </el-table-column>
            <el-table-column prop="" min-width="20%">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  @click="turnDel(scope.row)"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="toLeft">
            <el-button @click="allDel" size="small" type="danger"
              >全部删除</el-button
            >
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="回收站" name="third">
        <el-card>
          <el-table :data="trash" :show-header="false" style="width: 100%">
            <el-table-column prop="title" min-width="60%"> </el-table-column>
            <el-table-column prop="date" label="" min-width="20%">
            </el-table-column>
            <el-table-column prop="" min-width="20%">
              <template slot-scope="scope">
                <el-button @click="turnBack(scope.row)" size="small"
                  >还原</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="toLeft">
            <el-button @click="allBack" size="small">全部还原</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      // message: "2",
      noRead: [
        {
          id: 1,
          title: "【系统通知】 该系统将于今晚凌晨2点到5点进行升级维护",
          date: "2018-04-19 20:00:00",
        },
        {
          id: 2,
          title: "今晚12点整发大红包,先到先得",
          date: "2018-04-19 21:00:00",
        },
      ],
      Read: [
        {
          id: 3,
          title: "【天气预报】 全国各地，今晚至明天凌晨有寒潮来袭，注意保暖",
          date: "2018-04-20 19:00:00",
        },
      ],
      trash: [
        {
          id: 4,
          title: "【转账通知】您于昨晚支出12000元，请确认是您本人操作",
          date: "2018-04-15 08:00:00",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      // this.message = 1;
      // if (tab.label === "已读消息") {
      //   this.message = "已读";
      // } else if (tab.label === "未读消息") {
      //   this.message = "未读";
      // } else {
      //   this.message = "回收";
      // }
    },
    //标为已读
    turnRead(row) {
      //把数据存到已读页面
      var toReadData = { id: row.id, title: row.title, date: row.date };
      this.Read.push(toReadData);
      //未读页面不显示
      this.noRead = this.noRead.filter((item) => {
        if (item.id !== row.id) {
          return item;
        }
      });
    },
    //删除
    turnDel(row) {
      //把数据存到回收站页面
      var toTrashData = { id: row.id, title: row.title, date: row.date };
      this.trash.push(toTrashData);
      //已读页面不显示
      this.Read = this.Read.filter((item) => {
        if (item.id !== row.id) {
          return item;
        }
      });
    },
    //还原
    turnBack(row) {
      //把数据存到已读页面
      var toReadData = { id: row.id, title: row.title, date: row.date };
      this.Read.push(toReadData);
      //回收站不再显示该数据
      this.trash = this.trash.filter((item) => {
        if (item.id !== row.id) {
          return item;
        }
      });
    },
    //全部已读
    allRead() {
      console.log("全部已读");
      this.Read = this.Read.concat(this.noRead);
      this.noRead = [];
    },
    //全部删除
    allDel() {
      console.log("全部删除");
      this.trash = this.trash.concat(this.Read);
      this.Read = [];
    },
    //全部还原
    allBack() {
      console.log("全部还原");
      this.Read = this.Read.concat(this.trash);
      this.trash = [];
    },
  },
};
</script>

<style lang="scss" scope>
.toLeft {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
</style>
